{{ if .Site.Params.contact.enable }}
{{ "<!-- Start Contact Us -->" | safeHTML }}
<section class="contact-us section bg-gray" id="contact">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="title text-center">
                    {{ with .Site.Params.contact.topTitle }}<h4>{{.}}</h4>{{ end }}
                    {{ with .Site.Params.contact.title }}
                    <h2>{{.}}</h2>
                    <span class="border"></span>
                    {{ end }}
                    {{ with .Site.Params.contact.subtitle }}<p>{{.}}</p>{{ end }}
                </div>
            </div>
        </div>
        <div class="row">
            {{ "<!-- Contact Details -->" | safeHTML }}
            <div class="col-12 col-md-6">
                <div class="map">
                    <div id="map" data-lat="{{ .Site.Params.contact.mapLatitude }}" data-long="{{ .Site.Params.contact.mapLongitude }}" data-marker="{{ .Site.Params.contact.mapMarker | absURL }}"></div>
                </div>
            </div>
            {{ "<!-- Contact Form -->" | safeHTML }}
            <div class="contact-form col-12 col-md-6 ">
                <form id="contact-form" method="post" action="sendmail.php" role="form">
                    <div class="form-group">
                        <input type="text" placeholder="Your Name" class="form-control" name="name" id="name">
                    </div>

                    <div class="form-group">
                        <input type="email" placeholder="Your Email" class="form-control" name="email" id="email">
                    </div>

                    <div class="form-group">
                        <input type="text" placeholder="Subject" class="form-control" name="subject" id="subject">
                    </div>

                    <div class="form-group">
                        <textarea rows="6" placeholder="Message" class="form-control" name="message" id="message"></textarea>
                    </div>

                    <div id="mail-success" class="success">
                        Thank you. The Mailman is on His Way :)
                    </div>

                    <div id="mail-fail" class="error">
                        Sorry, don't know what happened. Try later :(
                    </div>

                    <div id="cf-submit">
                        <input type="submit" id="contact-submit" class="btn btn-transparent" value="Submit">
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-md-4">
                <div class="address-block contact-meta-block">
                    <i class="tf-ion-android-pin"></i>
                    <h4>Our Location</h4>
                    {{ with .Site.Params.contact.address }}<p>{{ . | safeHTML }}</p>{{ end }}
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="phone-block contact-meta-block">
                    <i class="tf-ion-ios-telephone"></i>
                    <h4>Call Us</h4>
                    <p>
                         {{ with .Site.Params.contact.phone }}Office: {{.}} {{ end }} 
                        <br> {{ with .Site.Params.contact.fax }} Fax: {{ . }} {{ end }}
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-4">
                <div class="social-icons-block contact-meta-block">
                    <i class="tf-ion-ios-contact"></i>
                    <h4>We are social</h4>
                    <ul class="list-inline social-icon">
                        {{ with .Site.Params.contact.facebook }}
                        <li class="list-inline-item">
                            <a href="{{.}}">
                                <i class="tf-ion-social-facebook"></i>
                            </a>
                        </li>
                        {{ end }}
                        {{ with .Site.Params.contact.twitter }}
                        <li class="list-inline-item">
                            <a href="{{.}}">
                                <i class="tf-ion-social-twitter"></i>
                            </a>
                        </li>
                        {{ end }}
                        {{ with .Site.Params.contact.linkedin }}
                        <li class="list-inline-item">
                            <a href="{{.}}">
                                <i class="tf-ion-social-linkedin"></i>
                            </a>
                        </li>
                        {{ end }}
                        {{ with .Site.Params.contact.dribbble }}
                        <li class="list-inline-item">
                            <a href="{{.}}">
                                <i class="tf-ion-social-dribbble"></i>
                            </a>
                        </li>
                        {{ end }}
                        {{ with .Site.Params.contact.instagram }}
                        <li class="list-inline-item">
                            <a href="{{.}}">
                                <i class="tf-ion-social-instagram"></i>
                            </a>
                        </li>
                        {{ end }}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
{{ end }}